<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>职务管理</title>
    <link rel="stylesheet" href="../../css/Sys-zwgl.css">
    <link rel="stylesheet" href='../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css'>
    <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div id='line1'>
            <button class='btn btn-primary' data-toggle="modal" data-target="#addnewjobdiv" id="addnewjob">+ 新增职务</button>
          </div>
          <div id = 'line2'>
            <table class="table table-hover">
              <thead> 
                <tr>
                  <th>ID</th>
                  <th>职务名称</th>
                  <th>职务编号</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="OfficeManageList"></tbody>
            </table>
          </div>
          <div id="line3">
            <span id="totalNum"></span>

            <select id="pageChange">
              <option value="0" onclick="perChoose()">3条/页</option>
              <option value="1" onclick="perChoose()">5条/页</option>
              <option value="2" onclick="perChoose()">10条/页</option>
            </select>

            <button id="pre">◁</button>
            <div id="pagebox">
            </div>
            <button id ="next">▷</button>

            <div id="gotoPage">
              <span>前往</span>
              <input type="text" id="gotoPageInput"  placeholder="请输入页数">
              <span>页</span>
              <button id="goTo">跳转</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!---------------------------- 编辑职务 --------------------------------->
    <div class="modal fade" id="modifydiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="modifyexampleModalLabel">编辑职务</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="jobName" class="control-label" ><span class="redcolor">*</span>职务名称</label>
                <input type="text" class="form-control" id="modifyjobName" placeholder="请输入职务名称">
              </div>
              <div class="form-group">
                <label for="jobSerialNum" class="control-label" ><span class="redcolor">*</span>职务编号</label>
                <input type="text" class="form-control" id="modifyjobSerialNum" placeholder="设置职务编号">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="confirmcancel()">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="confirm()">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!---------------------------- 添加职务 --------------------------------->
    <div class="modal fade" id="addnewjobdiv" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">新增职务</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="form-group">
                <label for="jobName" class="control-label" ><span class="redcolor">*</span>职务名称</label>
                <input type="text" class="form-control" id="jobName" placeholder="请输入职务名称">
              </div>
              <div class="form-group">
                <label for="jobSerialNum" class="control-label" ><span class="redcolor">*</span>职务编号</label>
                <input type="text" class="form-control" id="jobSerialNum" placeholder="设置职务编号">
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="addconfirmcancel()">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addconfirm()">保存</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" tabindex="-1" role="dialog" id="canceldiv">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div id="delText">确认删除后，角色将被彻底删除，对应人员所属角色清空</div>
          <div>
            <button id="cancelDel" data-dismiss="modal" >取消</button>
            <button id="sureDel" data-dismiss="modal" >确认</button>
          </div>
        </div>
      </div>
    </div>



  </body>
  <script>
  let OfficeManageData = [
    { id: 0, job: '院长', jobNum: 'NB12320' },
    { id: 1, job: '副院长', jobNum: 'NB12321' },
    { id: 2, job: '科室主任', jobNum: 'NB12322' },
    { id: 3, job: '医生', jobNum: 'NB12323' },
    { id: 4, job: '护士', jobNum: 'NB12324' },
    { id: 5, job: '保洁人员', jobNum: 'NB12325' },
    { id: 6, job: '安保人员', jobNum: 'NB12326' },
    { id: 7, job: '其他职务', jobNum: 'NB12327' },
    { id: 8, job: '其他职务', jobNum: 'NB12328' },
    { id: 9, job: '其他职务', jobNum: 'NB12329' },
    { id: 10, job: '其他职务', jobNum: 'NB12330' },
    { id: 11, job: '其他职务', jobNum: 'NB12331' },
    { id: 12, job: '其他职务', jobNum: 'NB12332' },
    { id: 13, job: '其他职务', jobNum: 'NB12333' },
    { id: 14, job: '其他职务', jobNum: 'NB12334' },
    { id: 15, job: '其他职务', jobNum: 'NB12335' },
    { id: 16, job: '其他职务', jobNum: 'NB12336' },
    { id: 17, job: '其他职务', jobNum: 'NB12337' },
    { id: 18, job: '其他职务', jobNum: 'NB12338' },
    { id: 19, job: '其他职务', jobNum: 'NB12339' },
    { id: 20, job: '其他职务', jobNum: 'NB12340' },
    { id: 21, job: '其他职务', jobNum: 'NB12341' },
    { id: 22, job: '其他职务', jobNum: 'NB12342' },
    { id: 23, job: '其他职务', jobNum: 'NB12343' },
    { id: 24, job: '其他职务', jobNum: 'NB12344' },
    { id: 25, job: '其他职务', jobNum: 'NB12345' },
    { id: 26, job: '其他职务', jobNum: 'NB12346' },
    { id: 27, job: '其他职务', jobNum: 'NB12347' },
    { id: 28, job: '其他职务', jobNum: 'NB12348' },
    { id: 29, job: '其他职务', jobNum: 'NB12349' },
    { id: 30, job: '其他职务', jobNum: 'NB12350' },
    { id: 31, job: '其他职务', jobNum: 'NB12351' },
    { id: 32, job: '其他职务', jobNum: 'NB12352' },
    { id: 33, job: '其他职务', jobNum: 'NB12353' },
    { id: 34, job: '其他职务', jobNum: 'NB12354' },
    { id: 35, job: '其他职务', jobNum: 'NB12355' },
    { id: 36, job: '其他职务', jobNum: 'NB12356' },
    { id: 37, job: '其他职务', jobNum: 'NB12357' },
    { id: 38, job: '其他职务', jobNum: 'NB12358' },
    { id: 39, job: '其他职务', jobNum: 'NB12359' },
    { id: 40, job: '其他职务', jobNum: 'NB12360' },
    { id: 41, job: '其他职务', jobNum: 'NB12361' },
    { id: 42, job: '其他职务', jobNum: 'NB12362' },
    { id: 43, job: '其他职务', jobNum: 'NB12363' },
    { id: 44, job: '其他职务', jobNum: 'NB12364' },
    { id: 45, job: '其他职务', jobNum: 'NB12365' },
    { id: 46, job: '其他职务', jobNum: 'NB12366' },
    { id: 47, job: '其他职务', jobNum: 'NB12367' },
    { id: 48, job: '其他职务', jobNum: 'NB12368' },
    { id: 49, job: '其他职务', jobNum: 'NB12369' },
  ]
  let showListByData = []
  let maxPage
  let nowPage = 1
  let modifyid
  let perNum = 3
  let cancelid
  initialData()

  function initialData()
  {
    nowPage = 1
    $('#gotoPageInput').val('')
    showPage(OfficeManageData)
    showListBy(OfficeManageData,1,perNum)
  }

  function showList(data){
      $('#OfficeManageList').html('')
      for(let i=0;i<data.length;i++){
        $('#OfficeManageList').append(`
        <tr>
            <td>${data[i].id}</td>  
            <td>${data[i].job}</td>  
            <td>${data[i].jobNum}</td>  
            <td>
              <button class='modify' dataStu = "${data[i].id}" data-toggle="modal" data-target="#modifydiv">编辑</button>
              <button class="delmodal" dataStu = "${data[i].id} "type="button" data-toggle="modal" data-target="#canceldiv">删除</button>
            </td>  
          </tr>
        `)
      }
    }
    function showListBy(data,pageNum,perNum){
      let startNum = (pageNum - 1)*perNum
      showListByData = data.slice(startNum,startNum+perNum)
      showList(showListByData)
      let leftNum = pageNum%5
      if(leftNum==0)
      {
        $('.page').eq(4).addClass('active').siblings().removeClass('active')
      }
      else
      {
        $('.page').eq(leftNum-1).addClass('active').siblings().removeClass('active')
      }
      nowPage = pageNum
    }

    function showPage(data){
      maxPage = Math.ceil(data.length/perNum)
      let intNum = parseInt(Math.ceil(nowPage/5))
      intNum--
      intNum = intNum*5
      $("#pagebox").html('')
      for(let i = intNum + 1;i<intNum + 6;i++)
      {
        if(i<=maxPage)
        {
          $("#pagebox").append(`<span class="page">${i}</span>`)
        }
        else
        {
          break
        }
      }
      $('#totalNum').html('')
      $('#totalNum').html(`共${maxPage}页`)
    }

    $('#pagebox').on('click','.page',function(){
      showListBy(OfficeManageData,parseInt($(this).text()),perNum)
    })
    //-----------------上下页--------------------------
    $('#pre').click(function(){
      if(nowPage>1){
        nowPage -= 1
        showPage(OfficeManageData)
        showListBy(OfficeManageData,nowPage,perNum)
      }
    })
    $('#next').click(function(){
      if(nowPage<maxPage){
        nowPage += 1
        showPage(OfficeManageData)
        showListBy(OfficeManageData,nowPage,perNum)
      }
    })

    $("#pageChange").change(function(){
      let Num =  $("#pageChange").val();
      if(Num == 0)
      {
        perNum = 3
        initialData()
      }
      else if(Num == 1)
      {
        perNum = 5
        initialData()
      }
      else if(Num == 2)
      {
        perNum = 10
        initialData()
      }
    })
    $('#goTo').click(function(){
      let num = parseInt($('#gotoPageInput').val())
      if(num>0&&num<=maxPage)
      {
        nowPage = num
        showPage(OfficeManageData)
        showListBy(OfficeManageData,num,perNum)
      }
      else{
        alert('请在正确的页码范围内输入')
      }
    })
    //---------------------删除--------------------------
    $('#OfficeManageList').on('click','.delmodal',function(e){
      cancelid = parseInt($(this).attr("dataStu"))
    })
    $('#sureDel').click(function(){
      del(cancelid)
      showPage(OfficeManageData)
      showListBy(OfficeManageData,nowPage,perNum)
    })
    function del(id){
      let num = 0
      for(let i = 0;i<OfficeManageData.length;i++){
        if(id==OfficeManageData[i].id)
        {
          num = i
          OfficeManageData.splice(i,1)
          for(let j=num;j<OfficeManageData.length;j++)
          {
            OfficeManageData[j].id -= 1
          }
        }
      }
    }
    //----------------------确定修改------------------
    $('#OfficeManageList').on('click','.modify',function(e){
      modifyid = $(this).attr("dataStu")
      $('#modifyexampleModalLabel').html(`编辑ID：${modifyid}的职务信息`)
      for(let i=0;i<OfficeManageData.length;i++){
        if(OfficeManageData[i].id==modifyid){
          $('#modifyjobName').val(OfficeManageData[i].job)
          $('#modifyjobSerialNum').val(OfficeManageData[i].jobNum)
        }
      }
    })

    function confirm(){
      let job = $('#modifyjobName').val()
      let jobNum = $('#modifyjobSerialNum').val()
      let j = 0
      let allow = 1
      let str = '其他职务'
      for(let i = 0;i<OfficeManageData.length;i++){
        if(modifyid!=OfficeManageData[i].id)
        {
          if(job!=str)
          {
            if(OfficeManageData[i].job==job){
              alert('职务名称已存在')
              allow = 0
            }
          }
          if(OfficeManageData[i].jobNum==jobNum){
            alert('职务编号已存在')
            allow = 0
          }
        }
      }
      if(allow == 1)
      {
        for(let i = 0;i<OfficeManageData.length;i++){
          if(OfficeManageData[i].id==modifyid){
            j=i
          }
        }
        OfficeManageData[j].job = job
        OfficeManageData[j].jobNum = jobNum
      }
      showPage(OfficeManageData)
      showListBy(OfficeManageData,nowPage,perNum)


      $('#modifyjobName').val('')
      $('#modifyjobSerialNum').val('')

    }

    function confirmcancel(){
      $('#modifyjobName').val('')
      $('#modifyjobSerialNum').val('')
    }
    //--------------------------添加-----------------------------
    function addconfirm(){
      let job = $('#jobName').val()
      let jobNum = $('#jobSerialNum').val()
      let j = 0
      let allow = 1
      let obj = {}
      for(let i = 0;i<OfficeManageData.length;i++){
        if(OfficeManageData[i].job==job){
          alert('职务名称已存在')
          allow = 0
        }
        if(OfficeManageData[i].jobNum==jobNum){
          alert('职务编号已存在')
          allow = 0
        }
        
      }
      if(allow == 1)
      {
        obj.id = OfficeManageData.length
        obj.job = job
        obj.jobNum = jobNum
        OfficeManageData.push(obj)
      }
      nowPage = maxPage
      showPage(OfficeManageData)
      showListBy(OfficeManageData,maxPage,perNum)


      $('#jobName').val('')
      $('#jobSerialNum').val('')

    }

    function addconfirmcancel(){
      $('#jobName').val('')
      $('#jobSerialNum').val('')
    }
</script>
</html>
